<template>
    <div class="join-drgs-container">
        <global-search @submitSearch="submitSearch" :showTime="false" class="global-tool-search">
            <template slot="other-form">
                <el-form-item label="出院时间" class="time-select-form-box">
                    <el-select v-model="form.outTimeUnit" class="time-unit" placeholder="">
                        <el-option label="年" value="year"></el-option>
                        <el-option label="季度" value="quarter"></el-option>
                        <el-option label="月" value="month"></el-option>
                    </el-select>
                    <select-year v-show="form.outTimeUnit !== 'month'" @selectYear="selectYear" :yearMonth="form.outYearMonth" :notData="true" />
                    <el-date-picker
                        v-show="form.outTimeUnit === 'month'"
                        class="year-month"
                        v-model="form.outYearMonth"
                        :type="form.outTimeUnit === 'month' ? 'month' : 'year'"
                        value-format="yyyy-MM-dd"
                        popper-class="custom-date-width">
                    </el-date-picker>
                    <el-select v-if="form.outTimeUnit === 'quarter'" class="quarter" v-model="form.outQuarter" placeholder="">
                        <el-option label="第一季度" value="1"></el-option>
                        <el-option label="第二季度" value="2"></el-option>
                        <el-option label="第三季度" value="3"></el-option>
                        <el-option label="第四季度" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="病案号">
                    <el-input v-model="form.medicalRecordSign" clearable class="name-input"></el-input>
                </el-form-item>
                <el-form-item label="主诊名称/编码">
                    <el-input v-model="form.diagnosisCode" clearable class="name-input"></el-input>
                </el-form-item>
                <el-form-item label="主手术名称/编码">
                    <el-input class="weight-input" clearable v-model="form.surgeryCode"></el-input>
                </el-form-item>
                <el-form-item label="入组一致性">
                    <el-select v-model="form.drGsState" filterable class="select-input" placeholder="">
                        <el-option :key="0" label="全部" :value="null"></el-option>
                        <el-option :key="21" label="一致" :value="21"></el-option>
                        <el-option :key="22" label="不一致" :value="22"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权重一致性">
                    <el-select v-model="form.weightState" filterable class="select-input" placeholder="">
                        <el-option :key="0" label="全部" :value="null"></el-option>
                        <el-option :key="23" label="一致" :value="23"></el-option>
                        <el-option :key="24" label="不一致" :value="24"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入组状态">
                    <el-select v-model="form.GState" filterable class="select-input" placeholder="">
                        <el-option :key="0" label="全部" :value="null"></el-option>
                        <el-option :key="1" label="已入组" :value="1"></el-option>
                        <el-option :key="2" label="零入组" :value="2"></el-option>
                        <el-option :key="3" label="歧义组" :value="3"></el-option>
                        <el-option :key="4" label="排除组" :value="4"></el-option>
                    </el-select>
                </el-form-item>
            </template>
        </global-search>
        <div class="tables-box">
            <el-table
                border
                :data="tableData"
                :max-height="tableHeight"
                tooltip-effect="light"
                style="width: 100%"
                :empty-text="emptyText"
                @sort-change="sortChange">
                <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    align="center"
                    type="index"
                    label="序号"
                    width="40">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="bah"
                    align="center"
                    label="病案号"
                    min-width="90">
                    <template slot-scope="scope">
                        <el-tooltip effect="light" placement="top">
                            <div slot="content">{{scope.row.fileName}}</div>
                            <span class="status-blue pointer" :disabled="!viewInfoMonth(scope.row.outTime)" @click="toInfo(scope.$index)">{{scope.row.bah}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="zycs"
                    align="center"
                    label="住院次数"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="name"
                    align="left"
                    label="患者姓名"
                    min-width="65">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="departmentName"
                    align="center"
                    label="出院科别"
                    min-width="100">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="outTime"
                    align="center"
                    sortable="custom"
                    label="出院时间"
                    min-width="85">
                    <template slot-scope="scope">
                        {{scope.row.outTime.substring(0, 10)}}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="diagnosisCode"
                    align="left"
                    label="主要诊断名称及编码"
                    min-width="140">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="top">
                            <div slot="content">
                                {{scope.row.diagnosisCode.split('-').slice(0, scope.row.diagnosisCode.split('-').length-1).join('-')}}
                            </div>
                            <span class="exceed-text">
                                {{scope.row.diagnosisCode.split('-').slice(0, scope.row.diagnosisCode.split('-').length-1).join('-')}}
                            </span>
                        </el-tooltip>
                        <div>{{scope.row.diagnosisCode.split('-').pop()}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="surgeryCode"
                    align="left"
                    label="主要手术名称及编码"
                    min-width="140">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="top">
                            <div slot="content">
                                {{scope.row.surgeryCode.split('-').slice(0, scope.row.surgeryCode.split('-').length-1).join('-')}}
                            </div>
                            <span class="exceed-text">
                                {{scope.row.surgeryCode.split('-').slice(0, scope.row.surgeryCode.split('-').length-1).join('-')}}
                            </span>
                        </el-tooltip>
                        <div>{{scope.row.surgeryCode.split('-').pop()}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="drgStandardFee"
                    align="center"
                    label="预测">
                    <el-table-column
                        show-overflow-tooltip
                        prop="dataStateName"
                        align="center"
                        label="入组状态"
                        min-width="80">
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="yC_DRGs"
                        align="center"
                        label="DRGs代码"
                        min-width="80">
                        <template slot-scope="scope">
                            <el-tooltip v-if="scope.row.yC_DRGsList.length" class="item" effect="light" placement="top">
                                <div slot="content">
                                    <div v-for="(item, index) in scope.row.yC_DRGsList">{{(index + 1) + '、' + item.key}}</div>
                                </div>
                                <span class="exceed-text">{{scope.row.yC_DRGs}}</span>
                            </el-tooltip>
                            <el-tooltip v-else class="item" effect="light" placement="top">
                                <div slot="content">
                                    <div>{{scope.row.yC_DRGs}}</div>
                                </div>
                                <span class="exceed-text">{{scope.row.yC_DRGs}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="yC_Weight"
                        align="center"
                        label="DRGs权重"
                        min-width="80">
                        <template slot-scope="scope">
                            <el-tooltip v-if="scope.row.yC_WeightList.length" class="item" effect="light" placement="top">
                                <div slot="content">
                                    <div v-for="(item, index) in scope.row.yC_WeightList">{{(index + 1) + '、' + item.key}}</div>
                                </div>
                                <span class="exceed-text">{{scope.row.yC_Weight}}</span>
                            </el-tooltip>
                            <el-tooltip v-else class="item" effect="light" placement="top">
                                <div slot="content">
                                    <div>{{scope.row.yC_Weight}}</div>
                                </div>
                                <span class="exceed-text">{{scope.row.yC_Weight}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="drgStandardFee"
                    align="center"
                    label="医保">
                    <el-table-column
                        show-overflow-tooltip
                        prop="yB_DRGs"
                        align="center"
                        label="DRGs代码"
                        min-width="80">
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="yB_Weight"
                        align="center"
                        label="DRGs权重"
                        min-width="80">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="drGsState"
                    align="center"
                    label="入组一致性"
                    min-width="90">
                    <template slot-scope="scope">
                        <span :class="{'status-green': [21, 23].includes(scope.row.drGsState), 'status-red': [22, 24].includes(scope.row.drGsState)}">{{scope.row.drGsState | getState}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="weightState"
                    align="center"
                    label="权重一致性"
                    min-width="90">
                    <template slot-scope="scope">
                        <span :class="{'status-green': [21, 23].includes(scope.row.weightState), 'status-red': [22, 24].includes(scope.row.weightState)}">{{scope.row.weightState | getState}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="changePage"/>
        </div>
    </div>
</template>

<script>
    import {getResultsList} from '@/api/group-compare/compare-results'
    import {viewInfoMonth, getSortString} from '@/utils/filters'
    import SelectYear from '@/components/SelectYear'

    export default {
        name: 'index',
        data () {
            return {
                form: {
                    // 病案号
                    medicalRecordSign: '',
                    // 主诊名称/编码
                    diagnosisCode: '',
                    // 主手术名称/编码
                    surgeryCode: '',
                    // 入组一致性
                    drGsState: null,
                    // 权重一致性
                    weightState: null,
                    // 出院时间单位
                    outTimeUnit: 'year',
                    // 出院时间
                    outYearMonth: '',
                    // 出院时间季度
                    outQuarter: 1,
                    // 入组状态
                    GState: null,
                    rid: ''
                },
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 20,
                // 表格高度
                tableHeight: 0,
                // 全部表格数据
                tableData: [],
                // 数据总数
                total: 0,
                // 全局搜索内容，用于翻页等不传参时使用数据
                globalForm: {},
                // 排序字段
                sortMap: {},
                // 排序方式
                sortType: '',
                // 空数据时显示的文本内容
                emptyText: '暂无数据',
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            this.initPage()
            // 头部40 + 快捷标签30 + 面包屑30 + 搜索框42 + 分页64 + 底部padding10 + 表格上面和灰色背景的空白10px
            let height = document.documentElement.clientHeight - 100 - 42 - 64 - 10 - 10
            this.tableHeight = height > 108 ? height : 108
        },
        mounted () {
            let searchHeight = document.getElementsByClassName('global-tool-search')[0].offsetHeight
            if (searchHeight > 42) {
                let height = document.documentElement.clientHeight - 100 - searchHeight - 64 - 10 - 10
                this.tableHeight = height > 108 ? height : 108
            }
            // 白色背景高度
            document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 64 + 10 + 'px'
            // 分页组件位置，不能使用bottom = 0，当位置发生变化时会出错
            document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 10 + 'px'
            window.onresize = () => {
                let height = document.documentElement.clientHeight - 100 - searchHeight - 64 - 10 - 10
                this.tableHeight = height > 108 ? height : 108
                document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 64 + 10 + 'px'
                document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 10 + 'px'
            }
        },
        methods: {
            viewInfoMonth,
            /**
             * 初始化页面参数
             */
            initPage () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                this.form.medicalRecordSign = query.medicalRecordSign
                this.form.diagnosisCode = query.diagnosisCode
                this.form.surgeryCode = query.surgeryCode
                this.form.drGsState = query.drGsState
                this.form.weightState = query.weightState
                this.form.rid = query.rid
                this.form.GState = query.GState
                this.currentPage = query.pageIndex || 1
                this.pageSize = query.pageSize || 20
            },
            /**
             * 翻页
             */
            changePage () {
                this.submitSearch()
            },
            /**
             * 提交查询
             * @param form 筛选条件
             */
            submitSearch (form) {
                let data = form || this.globalForm
                this.globalForm = data
                let params = {
                    ...data,
                    ...this.form,
                    pageSize: this.pageSize,
                    pageIndex: this.currentPage,
                    orderBy: this.sortType
                }
                // 删除全局的时间，使用当前页的时间
                delete params.start
                delete params.end
                this.tableData = []
                if (this.form.outYearMonth) {
                    params = this.getPickerTime(params)
                }
                this.getList(params)
                this.setGetStore(this.$route.name, params)
            },
            /**
             * 获取时间
             * @param params 参数对象
             */
            getPickerTime (params) {
                let time = this.form.outYearMonth
                let timeArr = time.split('-')
                let year = timeArr[0]
                let month = timeArr[1]
                // 每月天数
                let d = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
                if (this.form.outTimeUnit === 'month') {
                    params.start = time
                    // 判断闰年二月
                    if (parseInt(month) === 2 && year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
                        params.end = `${year}-${month}-${d[parseInt(month) - 1] + 1}`
                    } else {
                        params.end = `${year}-${month}-${d[parseInt(month) - 1]}`
                    }
                } else if (this.form.outTimeUnit === 'quarter') {
                    // 判断季度
                    switch (this.form.outQuarter) {
                    case '1':
                        params.start = `${year}-01-01`
                        params.end = `${year}-03-31`
                        break
                    case '2':
                        params.start = `${year}-04-01`
                        params.end = `${year}-06-30`
                        break
                    case '3':
                        params.start = `${year}-07-01`
                        params.end = `${year}-09-30`
                        break
                    case '4':
                        params.start = `${year}-10-01`
                        params.end = `${year}-12-31`
                        break
                    }
                } else if (this.form.outTimeUnit === 'year') {
                    params.start = `${year}-01-01`
                    params.end = `${year}-12-31`
                }
                return params
            },
            /**
             * 查询列表
             * @param params 请求参数
             */
            getList (params) {
                this.emptyText = '加载中...'
                if (this.getSession(this.$route.name, 'getResultsList') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getResultsList')
                    this.emptyText = '暂无数据'
                    if (res.code.toString() === '200') {
                        this.total = res.data.total
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                    }
                } else {
                    getResultsList(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getResultsList: res})
                        this.emptyText = '暂无数据'
                        if (res.code.toString() === '200') {
                            this.total = res.data.total
                            this.tableData = res.data.rows
                            this.sortMap = res.data.maps
                        }
                    }).catch(() => {
                        this.emptyText = '暂无数据'
                    })
                }
            },
            /**
             * 前往病案详情
             * @param index 索引
             */
            toInfo (index) {
                // 获取当前页面筛选条件
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                // 获取数据索引（详情页每页是1条，即是详情页页码）
                let pageIndex = (this.currentPage - 1) * this.pageSize + index + 1
                this.$store.dispatch('search/coverSearchFormItem', {
                    pageName: 'CompareResultsInfo',
                    query: {...query, pageIndex, keyword: query.medicalRecordSign}
                })
                this.$router.push({name: 'CompareResultsInfo'})
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.sortType = getSortString(colData, this.sortMap)
                this.tableData = []
                this.currentPage = 1
                this.submitSearch()
            },
            /**
             * 选择年
             * @param data 选择的数据
             */
            selectYear (data) {
                this.form.outYearMonth = data
            }
        },
        filters: {
            getState (val) {
                switch (val) {
                case 1:
                    return '不正常'
                case 2:
                    return '正常'
                case 21:
                    return '一致'
                case 22:
                    return '不一致'
                case 23:
                    return '一致'
                case 24:
                    return '不一致'
                }
            }
        },
        components: {SelectYear},
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style scoped lang="scss">
    .join-drgs-container {
        .el-form-item--mini.el-form-item {
            margin-bottom: 10px;
        }
        .name-input {
            width: 80px;
        }
        .select-input {
            width: 100px;
        }
        .weight-input {
            width: 80px;
        }
        .time-unit {
            width: 75px;
        }
        .year-month {
            width: 120px;
        }
        .quarter {
            width: 100px;
        }
        .time-select-form-box {
            /deep/.el-form-item__content {
                height: 29px;
                & > div {
                    float: left;
                }
            }
        }
        .tables-box {
            background: #fff;
            padding: 10px 10px 0;
            position: relative;
            .pagination-container {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
        /deep/.el-table {
            /deep/.cell {
                line-height: normal;
            }
        }
    }
</style>
